import {
  BlockOutlined,
  CopyOutlined,
  DeleteOutlined,
  DownOutlined,
  EyeInvisibleOutlined,
  LockOutlined,
  RedoOutlined,
  UndoOutlined,
  UpOutlined,
} from "@ant-design/icons";
import { Button, Space, Tooltip } from "antd";
import React from "react";
import { useDispatch } from "react-redux";
import { ActionCreators } from "redux-undo";
import useGetComponentInfo from "../../../hooks/useGetComponentInfo";
import useGetPageInfo from "../../../hooks/useGetPageInfo";
import {
  changeComponentHidden,
  moveComponent,
  ComponentInfoType,
  copySelectedComponent,
  pasteCopiedComponent,
  removeSelectedComponent,
  toggleComponentLocked,
} from "../../../store/componentsReducer";

const EditToolbar: React.FC = () => {
  const dispatch = useDispatch();
  const {
    selectedId,
    componentList,
    selectedComponent = {},
    copiedComponent,
  } = useGetComponentInfo();
  const { isPublished } = useGetPageInfo();
  const { isHidden, isLocked } = selectedComponent as ComponentInfoType;
  const selectedIndex = componentList.findIndex((c) => c.id === selectedId);

  function handleDelete() {
    dispatch(removeSelectedComponent());
  }

  function handleHidden() {
    dispatch(changeComponentHidden({ id: selectedId, isHidden: true }));
  }

  function handleLocked() {
    dispatch(toggleComponentLocked({ id: selectedId }));
  }

  function handleCopy() {
    dispatch(copySelectedComponent());
  }

  function handlePaste() {
    dispatch(pasteCopiedComponent());
  }

  function handleMoveUp() {
    if (selectedIndex === 0) return;
    dispatch(
      moveComponent({
        oldIndex: selectedIndex,
        newIndex: selectedIndex - 1,
      })
    );
  }

  function handleMoveDown() {
    if (selectedIndex === componentList.length - 1) return;
    dispatch(
      moveComponent({
        oldIndex: selectedIndex,
        newIndex: selectedIndex + 1,
      })
    );
  }

  function handleUndo() {
    dispatch(ActionCreators.undo());
  }

  function handleRedo() {
    dispatch(ActionCreators.redo());
  }

  return (
    <Space>
      <Tooltip title="删除">
        <Button
          shape="circle"
          icon={<DeleteOutlined />}
          onClick={handleDelete}
          disabled={!selectedId || isPublished}
        />
      </Tooltip>
      <Tooltip title="隐藏">
        <Button
          shape="circle"
          icon={<EyeInvisibleOutlined />}
          onClick={handleHidden}
          disabled={!selectedId || isPublished}
          type={isHidden ? "primary" : "default"}
        />
      </Tooltip>
      <Tooltip title="锁定">
        <Button
          shape="circle"
          icon={<LockOutlined />}
          onClick={handleLocked}
          disabled={!selectedId || isPublished}
          type={isLocked ? "primary" : "default"}
        />
      </Tooltip>
      <Tooltip title="复制">
        <Button
          shape="circle"
          icon={<CopyOutlined />}
          onClick={handleCopy}
          disabled={!selectedId || isPublished}
        />
      </Tooltip>
      <Tooltip title="粘贴">
        <Button
          shape="circle"
          icon={<BlockOutlined />}
          onClick={handlePaste}
          disabled={!copiedComponent || isPublished}
        />
      </Tooltip>
      <Tooltip title="上移">
        <Button
          shape="circle"
          icon={<UpOutlined />}
          onClick={handleMoveUp}
          disabled={!selectedId || selectedIndex === 0 || isPublished}
        />
      </Tooltip>
      <Tooltip title="下移">
        <Button
          shape="circle"
          icon={<DownOutlined />}
          onClick={handleMoveDown}
          disabled={
            !selectedId ||
            selectedIndex === componentList.length - 1 ||
            isPublished
          }
        />
      </Tooltip>
      <Tooltip title="撤销">
        <Button
          shape="circle"
          icon={<UndoOutlined />}
          onClick={handleUndo}
          disabled={isPublished}
        />
      </Tooltip>
      <Tooltip title="重做">
        <Button
          shape="circle"
          icon={<RedoOutlined />}
          onClick={handleRedo}
          disabled={isPublished}
        />
      </Tooltip>
    </Space>
  );
};

export default EditToolbar;
